<template>
  <div class="goods-info-wrapper">
    <div class="header">
      <div class="rotation">
        <van-swipe :autoplay="3500" :height="230">
          <van-swipe-item v-for="(item, index) in navListImg" :key="index">
            <img :src="item"/>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="con-box">
      <div class="title">
        {{goodsInfo.title}}
        <span>【{{goodsInfo.nick}}】</span>
      </div>
      <div class="con">
        <div class="con-l">
          <p>
            <span class="text">折扣价¥</span>
            <span class="price">{{goodsInfo.zk_final_price}}</span>
            <span class="old-price">原价{{goodsInfo.reserve_price}}</span>
          </p>
        </div>
        <div class="con-r">
          月售{{goodsInfo.volume}}件
        </div>
      </div>
      <div class="coupon-box" v-if="isShowCouponBox">
        <p class="price">{{goodsInfo.coupon_amount}}元优惠券</p>
        <p>使用期限:{{goodsInfo.coupon_start_time}} - {{goodsInfo.coupon_end_time}}</p>
      </div>
    </div>
    <div class="service">
      <p v-show="puyUrl" @click="puyUrlFn">{{puyText}}</p>
      <p v-show="goodsUrl" :data-clipboard-text="goodsUrl" class="copyGoodsUrl" @click="copyGoodsUrl">短链接</p>
      <p v-show="goodsToken" :data-clipboard-text="goodsToken" class="copyGoodsToken" @click="copyGoodsToken">淘口令</p>
    </div>
    <van-divider>相似推荐</van-divider>
    <v-like :like-item-id="goodsInfo.item_id" @goodsInfo="goodsInfoFn"></v-like>
  </div>
</template>

<script>
import { getGoodsPuyUrl, getGoodsToken } from '@/api/goods';
import Clipboard from 'clipboard';
import {ImagePreview, Toast} from 'vant';
export default {
  name: "info",
  components: {
    'v-like': () => import("@/components/goods/like")
  },
  data() {
    return {
      isShowCouponBox: false,
      goodsInfo: {},
      navListImg: [],
      goodsToken: '', //淘口令
      goodsUrl: '', //购买链接
      puyText: '购买',
      puyUrl: '' //购买链接
    };
  },
  created() {
    this.goodsInfo = this.$route.query;
    this.navListImg = this.goodsInfo.small_images;
    if(this.goodsInfo.item_url){
      this.puyUrl = this.goodsInfo.item_url;
    }
    if(this.goodsInfo.url){
      this.puyUrl = this.goodsInfo.url;
    }
    if(this.goodsInfo.coupon_share_url){
      this.isShowCouponBox = true;
      this.puyText = '领劵购买';
      this.puyUrl = this.goodsInfo.coupon_share_url
    }
  },
  methods:{
    puyUrlFn(){
      window.open(this.puyUrl,'_blank')
    },
    toTop() {//滚动到顶部
      //此处true 需要加上 不加滚动事件可能绑定不成功
      window.addEventListener("scroll", this.handleScroll, true);
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      //实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    showHeadImg(){
      ImagePreview(this.navListImg);
    },
    copyGoodsUrl(){
      var clipboard = new Clipboard('.copyGoodsUrl');
      clipboard.on('success', e => {
        Toast('复制短链接成功');
        console.log(e)
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        Toast('复制短链接失败');
        // 不支持复制
        console.log(e)
        clipboard.destroy()
      })
    },
    copyGoodsToken(){
      var clipboard = new Clipboard('.copyGoodsToken');
      clipboard.on('success', e => {
        Toast('复制淘口令成功');
        console.log(e)
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        Toast('复制淘口令失败');
        // 不支持复制
        console.log(e)
        clipboard.destroy()
      })
    },
    goodsInfoFn(e){
      this.goodsInfo = e;
      this.navListImg = this.goodsInfo.small_images;
      if(this.goodsInfo.item_url){
        this.puyUrl = this.goodsInfo.item_url;
      }
      if(this.goodsInfo.url){
        this.puyUrl = this.goodsInfo.url;
      }
      if(this.goodsInfo.coupon_share_url){
        this.isShowCouponBox = true;
        this.puyText = '领劵购买';
        this.puyUrl = this.goodsInfo.coupon_share_url
      }
    }
  },
  watch: {
    goodsInfo(){
      getGoodsPuyUrl({
        click_url: this.puyUrl
      }).then(res => {
        this.goodsUrl = res.url
      })
      getGoodsToken({
        text: this.goodsInfo.title,
        url: this.puyUrl,
        logo: this.goodsInfo.pict_url
      }).then(res => {
        this.goodsToken = res.token
      })
    }
  }
}
</script>

<style scoped>
.header{
  width: 100%;
}
.header .rotation{
  text-align: center;
}
.header .rotation img{
  height: 100%;
  width: 100%;
}
.goods-info-wrapper .con-box{
  font-size: 14px;
}
.goods-info-wrapper .con-box .title{
  font-size: 15px;
  padding:5px 10px;
  line-height: 24px;
  font-weight: 500;
}
.goods-info-wrapper .con-box .title span{
  color:red;
}
.goods-info-wrapper .con-box .con{
  line-height: 24px;
  padding:10px 15px 0px 15px;
  display: flex;
  flex-direction:row;
  justify-content: space-between;
}
.goods-info-wrapper .con-box .con .con-l .text{
  color:#FF0036;
}
.goods-info-wrapper .con-box .con .con-l .price{
  font-size: 18px;
  font-weight: 700;
  color:#FF0036;
}
.goods-info-wrapper .con-box .con .con-l .old-price{
  text-decoration:line-through;
  margin-left:5px;
}
.goods-info-wrapper .con-box .coupon-box{
  border-radius: 3px;
  padding:5px;
  background: linear-gradient(to right,#FF7B56,#FF283B);
  color: white;
  width: 90%;
  margin:10px 5%;
  box-sizing: border-box;
  line-height: 24px;
 }
.goods-info-wrapper .con-box .coupon-box p.price{
  font-size:18px;
  line-height: 24px;
  font-weight: 700;
}

.service{
  position: fixed;
  z-index: 99;
  right: 5px;
  bottom:8%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.service p{
  padding:5px 8px;
  color: white;
  font-size: 14px;
  line-height: 24px;
  background: #EE0A24;
  border-radius: 5px;
  margin-top:10px;
}

</style>